<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>温良酒店-客户信息</title>
    <base href="/jiudian/">

    <link rel="stylesheet" th:href="@{/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/layui.js}"></script>
    <script type="text/javascript" th:src="@{/js/vue.min.js}"></script>

    <style>
        .right h2 {
            margin: 10px 0;
        }

        .right li {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

    <div id="app">
        <header>
            <div style="float:left;">
                <div style="margin-top: 2px;">
                    <!--<img th:src="@{/img/tubiao.png}"  width='130px' height='40px' />-->
                    <img th:src="@{/img/b.png}"  width='40px' height='40px' style="margin-left: 28px;"/>
                </div>
            </div>
            <div style="float:left;">
                <h2 style="color: black;margin-left: 1px;">温良酒店管理系统</h2>
            </div>



            <div style="float: right ;">
                <div>
                    <div style="margin-top: -10px;margin-left: 10px;">
                        <span th:text="${nickname}" style="color: black;font-size:20px" ></span>
                    </div>
                </div>
                <div>
                    <div style="height: 20px;margin-right: 20px;margin-top: -30px;margin-left: 10px;" >
                        <a th:href="@{'/root/quit'}" style="color: red;">退出</a>
                    </div>
                </div>

            </div>
            <div style="float: right ">
                <div>
                    <div style="height: 40px">
                        <div th:if="${headurl} != null">
                            <div th:if="${headurl} != ''">
                                <img th:src="@{${headurl}}" width='40' height='40' />
                            </div>
                        </div>
                        <div th:if="${headurl} == null">
                            <img th:src="@{/img/b.png}" width='40' height='40' />
                        </div>
                        <div th:if="${headurl} == ''">
                            <img th:src="@{/img/b.png}" width='40' height='40' />
                        </div>
                    </div>
                </div>

            </div>
        </header>
        <div class="main">
            <div class="left">
                <ul class="cl">
                    <!--顶级分类-->
                    <li v-for="vo,index in menu" :class="{hidden:vo.hidden}">
                        <a href="javascript:;" :class="{active:vo.active}" @click="onActive(index)">
                            <i class="layui-icon" v-html="vo.icon"></i>
                            <span v-text="vo.name"></span>
                            <i class="layui-icon arrow" v-show="vo.url.length==0">+</i>
                            <i v-show="vo.active" class="layui-icon active"></i>
                        </a>
                        <!--子级分类-->
                        <div v-for="vo2,index2 in vo.list">
                            <a href="javascript:;" :class="{active:vo2.active}" @click="onActive(index,index2)"
                               v-text="vo2.name"></a>
                            <i v-show="vo2.active" class="layui-icon active">-</i>
                        </div>
                    </li>
                </ul>

            </div>
            <div class="right">
                <div class="layui-row">

                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>客户列表</legend>
                    </fieldset>

                    <table class="layui-table layui-form">
                        <thead>
                            <tr>
                                <th>客户编号</th>
                                <th>姓名</th>
                                <th>性别</th>
                                <th>身份证号</th>
                                <th>手机号</th>




                            </tr>
                        </thead>

                        <tbody>
                            <tr class="id84" th:each="customer:${customers}">

                                <td th:text="${customer.id}"></td>
                                <td th:text="${customer.customerName}" style="font-family: 宋体;font-weight: bold"></td>
                                <td th:text="${customer.sex}"></td>
                                <td th:text="${customer.idcard}"></td>
                                <td th:text="${customer.phone}"></td>






                            </tr>
                        </tbody>
                    </table>

                </div>

            </div>


        </div>
    </div>

    <script type="text/javascript" th:src="@{/js/config.js}"></script>
    <script type="text/javascript" th:src="@{/js/script.js}"></script>
</body>
</html>